<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 初始值为0 -->
        <h1>值为：{{count}}</h1>

        <!-- 传参直接传，没有什么限制
            而且，这个属性中的函数代码只有在事件触发后才会执行，才会进行传参
        -->
        <!-- v-on的简写为 "@" -->
        <button @click="addCount(1)">累加1</button>
        <button @click="addCount(2)">累加2</button>
        <button @click="addCount(3)">累加3</button>
    </div>
</body>

</html>
<script src="../../../vue.js"></script>
<script>
    Vue.config.productionTip = false;

    const vm = new Vue({
        el: "#app",
        data() {
            return {
                count: 0,
            };
        },
        methods: {
            addCount(n) {
                this.count += n;
            },
        },
    });
</script>